<template>
  <div>
    <el-table
      stripe
      style="width: 100%"
      :data="warningManageList"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="name" label="测点名称"> </el-table-column>
      <el-table-column prop="description" label="预警原因"> </el-table-column>
      <el-table-column prop="warnTime" label="预警时间"> </el-table-column>
      <el-table-column prop="warnType" label="预警类型">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.warnType == 0 || scope.row.warnType == 1"
            type="success"
            size="mini"
            >正常</el-button
          >
          <el-button
            v-if="scope.row.warnType == 2 && scope.row.warnLevel == 1"
            type="danger"
            size="mini"
            >一级预警</el-button
          >
          <el-button
            v-if="scope.row.warnType == 2 && scope.row.warnLevel == 2"
            type="danger"
            size="mini"
            >二级预警</el-button
          >
          <el-button
            v-if="scope.row.warnType == 2 && scope.row.warnLevel == 3"
            type="danger"
            size="mini"
            >三级预警</el-button
          >
          <el-button v-if="scope.row.warnType == 3">相对预警</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="warnLevel" label="数据预警等级">
        <template slot-scope="scope">
          <el-button v-if="scope.row.warnLevel == 0" type="success" size="mini"
            >正常</el-button
          >
          <el-button v-if="scope.row.warnLevel == 1" type="danger" size="mini"
            >一级预警</el-button
          >
          <el-button v-if="scope.row.warnLevel == 2" type="warning" size="mini"
            >二级预警</el-button
          >
          <el-button v-if="scope.row.warnLevel == 3" type="primary" size="mini"
            >三级预警</el-button
          >
        </template>
      </el-table-column> -->
      <el-table-column prop="dealStatus" label="处理状态">
        <template slot-scope="scope">
          <!-- <span size="mini" v-if="scope.row.dealStatus == 0 &&scope.row.warnType == 1|| scope.row.warnType==0">未处理</span> -->
          <span
            size="mini"
            v-if="scope.row.warnType == 2 && scope.row.dealStatus == 1"
            >已处理</span
          >
          <span
            size="mini"
            v-if="scope.row.warnType == 2 && scope.row.dealStatus == 0"
            >未处理</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="dealTime" label="处理时间"> </el-table-column>
      <el-table-column prop="dealType" label="处理方式">
        <template slot-scope="scope">
          <span v-if="scope.row.dealType == 0">恢复正常</span>
          <span v-if="scope.row.dealType == 1">一小时内不预警</span>
          <span v-if="scope.row.dealType == 2">十二小时内不预警</span>
          <span v-if="scope.row.dealType == 3">一天内不预警</span>
          <span v-if="scope.row.dealType == 4">三天内不预警</span>
          <span v-if="scope.row.dealType == 5">一周内不预警</span>
        </template>
      </el-table-column>
      <el-table-column prop="warnType" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.warnType == 2"
            type="danger"
            size="mini"
            @click="show_process_dialog(scope.row)"
            >点击处理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[10, 15]"
          :page-size="query.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
    </el-row>
    <!-- 操作弹窗 -->
    <el-dialog title="预警处理" :visible.sync="dialog_flag" width="30%">
      <el-form
        ref="disposeForm"
        :model="disposeForm"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="处理方式" prop="dealType">
          <el-select
            v-model="disposeForm.dealType"
            placeholder="请选择预警处理方式"
          >
            <el-option label="恢复正常" :value="0"></el-option>
            <el-option label="1小时内不预警" :value="1"></el-option>
            <el-option label="6小时内不预警" :value="2"></el-option>
            <el-option label="1天内不预警" :value="3"></el-option>
            <el-option label="3天内不预警" :value="4"></el-option>
            <el-option label="7天内不预警" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理备注" prop="note">
          <el-input type="textarea" v-model="disposeForm.note"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handWear">确定</el-button>
          <el-button @click="closeHandWear">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { warningManage } from "../../../api/warning-management-api";
export default {
  name: "SurfaceDisplacement",
  props: {
    tailingPondId: Number,
    require: true,
  },
  data() {
    return {
      dialog_flag: false,
      disposeForm: {
        dealType: null,
        note: "",
        monitorPondId: null,
      },
      query: {
        page: 1,
        pagesize: 10,
      },
      total: null,
      taipondId: null,
      warningManageList: [],
      rules: {
        dealType: [
          { required: true, message: "请选择处理方式", trigger: "change" },
        ],
        note: [{ required: true, message: "请填写备注", trigger: "blur" }],
      },
    };
  },
  methods: {
    //分页获取
    async getWarningMannge() {
      const res = await warningManage({
        monitorTypeId: 2,
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        tailingPondId: this.taipondId,
      });
      console.log(res);
      if (res.resultCode == "200") {
        this.warningManageList = res.parameter.list;
        this.total = res.parameter.total;
        console.log(this.warningManageList);
      }
      console.log(this.taipondId);
    },
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getWarningMannge();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getWarningMannge();
    },
    show_process_dialog(row) {
      this.dialog_flag = true;
      this.disposeForm.monitorPondId = row.id;
    },
    handWear() {
      this.$refs.disposeForm.validate((val) => {
        if (val) {
          const formData = new FormData();
          for (const [key, value] of Object.entries(this.disposeForm)) {
            formData.append(key, value);
          }
          axios({
            method: "post",
            url: "/warningManage/handleWarning",
            data: formData,
          }).then((res) => {
            console.log(res);
            if (res.data.resultCode == "200") {
              this.dialog_flag = false;
              this.$message.success("处理成功");
              this.getWarningMannge();
            }
          });
        } else {
          this.$message.error("请填写表单项");
        }
      });
      this.$refs.disposeForm.resetFields();
    },
    closeHandWear() {
      this.$refs.disposeForm.resetFields();
      this.dialog_flag = false;
    },
  },
  mounted() {
    // setTimeout(() => {
    this.getWarningMannge();
    // }, 10)
  },
  watch: {
    tailingPondId: {
      handler(newName, oldName) {
        this.taipondId = this.tailingPondId;
        this.getWarningMannge();
      },
      deep: true,
      immediate: true,
    },
    // tailingPondId (val) {
    //   console.log(val);
    //   this.taipondId = val
    //   console.log(this.taipondId);
    // }
  },
};
</script>

<style scoped>
.el-table-box {
  margin-top: 20px;
  margin-bottom: 20px;
  display: block;
  height: 73vh;
  overflow-y: auto;
}
.el-table::before {
  z-index: inherit;
}
</style>
